<template>
  <div>
    <b-container style="margin-top: 10px" fluid="sm">
      <b-row>
        <b-col cols="12" md="4" sm="12" order="2" order-md="1">
          <template v-for="(side, index) in homeSides">
            <news-type
              v-if="side.linkType === 'newsType'"
              :key="index"
              :type-id="side.link"
              :title="side.value"
            />
            <div v-else-if="side.linkType === 'basicConfig'" :key="index">
              <config-group-show :config-id="side.link" />
            </div>
          </template>
        </b-col>
        <b-col cols="12" md="8" sm="12" order="1" order-md="2">
          <template v-for="(type, idx) in homeNewsTypes">
            <news-type
              v-if="type.linkType==='newsType'"
              :key="idx"
              :type-id="type.link"
              :title="type.value"
              style="margin-bottom: 10px"
            />
            <div
              v-else-if="type.linkType === 'contentConfig'"
              :key="idx"
              style="margin-bottom: 10px"
            >
              <basic-content :content-id="type.link" />
            </div>
          </template>
        </b-col>
      </b-row>
    </b-container>

  </div>
</template>

<script>

import { getByCode } from '~/api/basicConfig/index'
import newsType from '~/components/newsType'
import basicContent from '~/components/basicContent'
import configGroupShow from '~/components/config-group-show'

export default {
  name: 'Index',
  components: { newsType, configGroupShow, basicContent },
  asyncData() {
    const getHomeNewsTypes = getByCode({ classifyCode: 'home-news' }).then(res => {
      return {
        homeNewsTypes: res.data.basicItems
      }
    })
    const getHomeLeft = getByCode({ classifyCode: 'home-left' }).then(res => {
      const { data } = res
      return {
        homeSides: data.basicItems
      }
    })
    return Promise.all([getHomeLeft, getHomeNewsTypes]).then(([homeLeft, homeNewsTypes]) => {
      return {
        ...homeLeft,
        ...homeNewsTypes,
        title: '成才技术学院'
      }
    })
  },
  data() {
    return {
    }
  },
  created() {
    // getByCode({ classifyCode: 'home-news' }).then(res => {
    //   const { data } = res
    //   this.homeNewsTypes = data.basicItems
    // })
    // getByCode({ classifyCode: 'home-left' }).then(res => {
    //   const { data } = res
    //   this.homeSides = data.basicItems
    // })
  },
  head() {
    // 取不到list
    const title = this.title
    return {
      title
    }
  }
}
</script>

<style scoped>

</style>
